<template>
  <div v-show="visible">
    <ul class="help-badge">
      <li @click="goContact">反馈</li>
      <li @click="showHelpDetails">帮助</li>
    </ul>
    <transition name="el-zoom-in-bottom" @after-enter="setActiveStats">
      <div class="help-dialog" v-show="show">
        <button class="dialog-closebtn" @click="show = false"><i class="el-icon-close"></i></button>
        <el-tabs v-model="activeName" v-loading="!loaded" @tab-click="handleTabClick">
          <el-tab-pane class="el-tab-pane" label="常见问题" name="first">
            <el-row v-if="helps.length" class="pane-content" :gutter="10">
              <el-col :span="7" class="help-nav">
                <ul v-for="(item, index) in helps" :key="index" @click="handleClick">
                  <li v-for="(question, i) in item.questions"
                    :key="i"
                    :data-hash="`#${item.model}-help-${i}`"
                    :class="`#${item.model}-help-${i}` === active ? 'active' : ''">
                    {{question.question}}?
                  </li>
                </ul>
              </el-col>
              <el-col :span="17" class="help-content custom-scrollbar" @scroll="paperScroll">
                <ul v-for="(item, index) in helps" :key="index">
                  <li v-for="(question, i) in item.questions"
                    class="question-item"
                    :key="i"
                    :id="`${item.model}-help-${i}`">
                    <h5>{{question.question}}</h5>
                    <div v-html="question.answer"></div>
                  </li>
                </ul>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane class="el-tab-pane" label="系统帮助" name="second">
            <el-row v-if="questions.length" class="pane-content" :gutter="10">
              <el-col :span="7" class="help-nav">
                <ul v-for="(item, index) in questions" :key="index" @click="handleClick">
                  <li v-for="(question, i) in item.questions"
                    :key="i"
                    :data-hash="`#${item.model}-qa-${i}`"
                    :class="`#${item.model}-qa-${i}` === active ? 'active' : ''">
                    {{question.question}}
                  </li>
                </ul>
              </el-col>
              <el-col :span="17" class="help-content custom-scrollbar" @scroll="paperScroll">
                <section v-for="(item, index) in questions" :key="index">
                  <h3>{{item.desc}}</h3>
                  <ul>
                    <li v-for="(question, i) in item.questions"
                      class="question-item"
                      :key="i"
                      :id="`${item.model}-qa-${i}`">
                      <h5>Q: {{question.question}}</h5>
                      <div v-html="question.answer"></div>
                    </li>
                  </ul>
                </section>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </transition>
  </div>
</template>
<script>
import mockData from '@/pages/Index/HelpCenter/mock.js';
import scrollbar from 'mixins/scrollbar';

export default {
  mixins: [scrollbar],
  mounted () {
    // console.log('我是帮助');
  },
  data() {
    return {
      activeName: 'first',
      show: false,
      helps: [],
      questions: [],
      active: '',
      visible: false,
      loaded: true,
      showTips: false,
      beforeTab: null,
    };
  },
  watch: {
    active(value) {
      if (jQuery(this.active).length) {
        const offsetTop = jQuery(this.active).position().top + jQuery('.help-content').scrollTop();
        jQuery('.help-content').scrollTop(offsetTop);
      }
    },
    '$route'(to, from) {
      // this.visible = !!to.meta.functional;
      // this.show = false;
      this.visible = true;
      this.show - true;
    },
  },
  methods: {
    HTMLDecode(text) {
      let temp = document.createElement('div');
      temp.innerHTML = text;
      const output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    },
    handleClick(event) {
      if (event.target.nodeName.toLowerCase() === 'li') {
        this.active = event.target.getAttribute('data-hash');
      }
    },
    handleTabClick(tab) {
      this.questions = mockData;
    },
    goContact() {
      this.show = false;
      this.$router.push({ name: 'contact-us' });
    },
    setActiveStats() {
      const related = this.helps.filter(item => item.model === this.$route.meta.functional);
      this.active = related.length ? `#${related[0].model}-q-0` : `#${this.helps[0].model}-q-0`;
    },
    showHelpDetails() {
      this.show = true;
      this.helps = mockData;
    },
    highlightTips() {
      this.showTips = true;
      setTimeout(() => {
        this.showTips = false;
      }, 3000);
    }
  }
}
</script>
<style lang="scss" scoped>
  .help-badge {
    position: fixed;
    right: 0;
    bottom: 70px;
    background: #fff;
    border: 1px solid #d3dce6;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
    width: 22px;
    text-align: center;
    padding: 1px;
    li {
      opacity: 0.85;
      font-size: 12px;
      color: #1f2d3d;
      line-height: 14px;
      padding: 6px 0;
      cursor: pointer;
      &:hover {
        background: #f1f1f1;
      }
      & + li {
        border-top: 1px solid rgba(50, 64, 87, .65);
      }
    }
  }
  .help-dialog {
    position: fixed;
    bottom: 60px;
    right: 0;
    width: 680px;
    background: #fff;
    border: 1px solid #d3dce6;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
    padding: 0 20px 20px;
    z-index: 1000;
    .dialog-closebtn {
      position: absolute;
      top: 0;
      right: 7px;
      padding: 13px;
      border: none;
      opacity: .5;
      z-index: 1;
      background: transparent;
      outline: none;
      &:hover {
        opacity: 1;
      }
    }
    .pane-content {
      overflow: auto;
      height: 340px;
      color: #475669;
      .help-nav,
      .help-content {
        height: inherit;
        overflow: auto;
      }
    }
  }
  .help-nav {
    ul {
      list-style-type: disc;
      margin-left: 16px;
      line-height: 2;
      li {
        cursor: pointer;
      }
      li.active {
        color: #546272;
        font-weight: 700;
      }
    }
  }
  .el-tab-pane {
    margin: 0 5px;
  }
</style>
<style>
  .help-content {
    img {
      max-width: 100%;
    }
    h5 {
      color: #333;
      font-weight: 700;
      margin-bottom: 12px;
    }
    h3 {
      font-size: 18px;
      padding: 10px 0;
    }
    ul,
    li {
      margin-bottom: 20px;
    }
  }
</style>
